<template>
	<view :class="model+'-wrap'">
		<view :class="'p-sticky-'+model" :style="model=='light'?'background:#fff':''">
			<view class="status_bar">
	
			</view>
			<view class="nav_bar flex align-center justify-between">
				<view class="flex-1">
					<view @click="$tool.goBack()" class="f0 p-3">
						<image class="fanhui_icon" :src="'/static/images/fanhui_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view class="A-Medium" :class="'navTitle_'+model">
					{{i18n.p043}}
				</view>
				<view class="flex-1">
				</view>
			</view>
			<view class="selectWrap py-3 pl-3 flex align-center" :class="model=='light'?'selectWrapLight':''">
				<view @click="open1" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p016}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view @click="open2" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p017}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
				<view @click="open3" class="flex align-center mr-4">
					<view class="title A-Bold mr-1" :class="model=='light'?'titleLight':''">
						{{i18n.p018}}
					</view>
					<view class="f0">
						<image style="width: 14rpx;height: 8rpx;" :src="'/static/images/record/1_'+model+'.png'" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="orderList A-Medium" style="margin-top: 14rpx;" :class="model=='light'?'orderListLight':''">
			<view v-for="(item,index) in orderList2" class="orderItem mx-3" style="margin-bottom: 12rpx;">
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{item.orderNo}}
					</view>
					<view class="">
						{{item.createTime}}
					</view>
				</view>
				<view class="flex align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="flex align-center">
						<view class="text2" style="margin-right: 12rpx;">
							{{item.getCoinType}}
						</view>
						<view :class="item.buySell=='buy'?'label2':'label'">
							{{item.buySell=='buy'?i18n2.t022:i18n2.t075}}
						</view>
					</view>
					<view class="flex align-center">
						<!-- <view class="icon">
							
						</view> -->
						<view class="f0">
							<image style="width: 20rpx;height: 20rpx;margin-right: 8rpx;"
								:src="'/static/images/jiaoyisuo/'+$tool.getExchangeImg(item.exchange)+'.png'" mode=""></image>
						</view>
						<view class="text3">
							{{item.exchange}}
						</view>
					</view>
				</view>
				<!-- <view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t023}}({{item.buyCoinType}})
					</view>
					<view class="">
						${{item.buyCoinAmount}}
					</view>
				</view> -->
				<!-- 买入数量/卖出数量 -->
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{item.buySell=='buy'?i18n2.t081:i18n10.n119}}
					</view>
					<view class="">
						<template v-if="item.buySell=='buy'">
							$
						</template>
						{{item.buyCoinAmount}}
						<template v-if="item.buySell!='buy'">
							{{item.buyCoinType}}
						</template>
					</view>
				</view>
				<!-- <view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t024}}({{item.buyCoinType}})
					</view>
					<view class="">
						${{item.buyCoinSoldPrice}}
					</view>
				</view> -->
				<!-- 买入价位/卖出价位 -->
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{item.buySell=='buy'?i18n10.n120:i18n10.n121}}
					</view>
					<view class="">
						${{item.buyCoinSoldPrice}}
					</view>
				</view>
				<!-- <view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t025}}({{item.getCoinType}})
					</view>
					<view class="">
						{{item.getCoinSoldAmount}}
					</view>
				</view> -->
				<!-- 成交金额 -->
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t025}}
					</view>
					<view class="">
						{{item.getCoinSoldAmount}}&nbsp;
						<template v-if="item.buySell != 'buy'">
							{{item.getCoinType}}
						</template>
						<template v-else>
							{{item.getCoinType}}
						</template>
					</view>
				</view>
				<!-- 手续费 -->
				<view class="flex text1 align-center justify-between" style="margin-bottom: 6rpx;">
					<view class="">
						{{i18n2.t026}}({{Math.round(item.fee / item.getCoinSoldAmount * 100)}}%)
					</view>
					<view class="" style="color: #53D290;">
						- {{item.fee}}{{item.getCoinType}}
					</view>
				</view>
				<!-- 实际获得 -->
				<view class="flex text1 align-center justify-between">
					<view class="">
						{{i18n2.t027}}
					</view>
					<view class="">
						{{item.getCoinActualAmount}}{{item.getCoinType}}
					</view>
				</view>
			</view>
		</view>
		<view class="A-Medium text-alignC" style="font-size: 24rpx;color: #7F838D;">
			{{i18n.p023}}～
		</view>
		<sjPoup ref="sjPoup" @confirm="confirm2"></sjPoup>
		<bzPoup ref="bzPoup" @confirm="confirm1"></bzPoup>
		<ztPoup :type="7" ref="ztPoup" @confirm="confirm3"></ztPoup>
	</view>
</template>

<script>
	import {
		spotBuyList
	} from '@/core/api/index.js';
	import bzPoup from '@/components/bzPoup.vue';
	import sjPoup from '@/components/sjPoup.vue';
	import ztPoup from '@/components/ztPoup.vue';
	export default {
		components:{
			bzPoup,
			sjPoup,
			ztPoup
		},
		data() {
			return {
				pageNo2:1,
				pageSize2:15,
				orderList2:[],
				buySell:'',
				coinType:'',
				startDate:'',
				endDate:'',
				isOpen1:false,
				isOpen2:false,
				isOpen3:false,
			}
		},
		onReady() {
			this.$tool.setStatusBarStyle(this.model);
		},
		onShow() {
			this.$tool.setStatusBarStyle(this.model);
			const pages = getCurrentPages();
			const page = pages[pages.length - 1];
			const currentWebview = page.$getAppWebview();
			if(this.model == "dark"){
				currentWebview.setStyle({
					background: "#0E0F11"
				});
			}else{
				currentWebview.setStyle({
					background: "#ffffff"
				});
			}
		},
		onLoad(options) {
			// this.buySell = options.buySell;
			this.getLiquidityCisternList();
		},
		computed: {
			i18n() {
				return this.$t('property');
			},
			i18n2() {
				return this.$t('trade')
			},
			i18n10() {
				return this.$t('newObj')
			},
			model() {
				return this.$store.state.config.model;
			}
		},
		onReachBottom() {
			this.pageNo2++;
			this.getLiquidityCisternList();
		},
		methods:{
			open1() {
				this.closePopup(1);
				if(this.isOpen1){
					this.closePopup(4);
				}else{
					this.$refs.bzPoup.open();
				}
				this.isOpen1 = !this.isOpen1;
			},
			open2() {
				this.closePopup(2);
				if(this.isOpen2){
					this.closePopup(4);
				}else{
					this.$refs.sjPoup.open();
				}
				this.isOpen2 = !this.isOpen2;
			},
			open3() {
				this.closePopup(3);
				if(this.isOpen3){
					this.closePopup(4);
				}else{
					this.$refs.ztPoup.open();
				}
				this.isOpen3 = !this.isOpen3;
			},
			closePopup(e) {
				if (e != 1) {
					this.$refs.bzPoup.closePopup();
				}
				if (e != 2) {
					this.$refs.sjPoup.closePopup();
				}
				if (e != 3) {
					this.$refs.ztPoup.closePopup();
				}
			},
			confirm1(e) {
				this.coinType = e.value;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
			confirm2(e) {
				this.startDate = e.startDate;
				this.endDate = e.endDate;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
			confirm3(e) {
				this.buySell = e.value;
				this.pageNo2 = 1;
				this.getLiquidityCisternList();
			},
			getLiquidityCisternList() {
				spotBuyList({
					buySell:this.buySell,
					pageNo: this.pageNo2,
					pageSize: this.pageSize2,
					mobileUserId: uni.getStorageSync('mobileUserId'),
					startDate:this.startDate,
					endDate:this.endDate,
					buyCoinType:this.coinType
				}).then(res => {
					let list = res.result.records;
					if (this.pageNo2 == 1) {
						this.orderList2 = list;
					} else {
						if (list.length == 0) {
							this.pageNo2--;
						} else {
							this.orderList2.push(...list);
						}
					}
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.selectWrap {
		background: #0E0F11;
		.title {
			height: 34rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #F7F7F7;
		}
		.titleLight {
			color: #0E0F11;
		}
	}
	.selectWrapLight {
		background: #E6E8EF;
	}
	.orderList {
		.orderItem {
			padding: 24rpx 30rpx;
			background: #16181C;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			border: 2rpx solid #1F2128;
	
			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}
	
			.text2 {
				font-size: 28rpx;
				color: #F7F7F7;
			}
	
			.text3 {
				font-size: 24rpx;
				color: #F7F7F7;
			}
	
			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #F7F7F7;
				margin-right: 8rpx;
			}
	
			.icon2 {
				width: 20rpx;
				height: 20rpx;
				background: #7F838D;
				margin-right: 8rpx;
			}
	
			.label {
				padding: 2rpx 10rpx;
				border-radius: 30rpx;
				border: 1rpx solid #82DA4C;
				font-size: 20rpx;
				color: #82DA4C;
			}
			.label2 {
				padding: 2rpx 10rpx;
				border-radius: 30rpx;
				border: 1rpx solid #E7343F;
				font-size: 20rpx;
				color: #E7343F;
			}
			.price1 {
				font-size: 24rpx;
				color: #E7343F;
			}
	
			.price2 {
				font-size: 24rpx;
				color: #53D290;
			}
	
			.price3 {
				font-size: 24rpx;
				color: #82DA4C;
			}
		}
	}
	
	.orderListLight {
		.orderItem {
			background: #FFFFFF;
			border: 2rpx solid #fff;
	
			.text1 {
				font-size: 24rpx;
				color: #7F838D;
			}
	
			.text2 {
				color: #0E0F11;
			}
	
			.text3 {
				color: #0E0F11;
			}
	
			.icon {
				width: 20rpx;
				height: 20rpx;
				background: #0E0F11;
				margin-right: 8rpx;
			}
	
			.label {
				padding: 2rpx 10rpx;
				border-radius: 30rpx;
				border: 1rpx solid #82DA4C;
				font-size: 20rpx;
				color: #82DA4C;
				background: #fff;
			}
		}
	}
</style>